<template>
  <div>
    <div class="half1" >
      <div  class="left-column" style="background-color: #9c26b0;margin-top: 1%">
        <!--      常用操作  -->
        <div style="height: 110px;background-color: #00ffe1;width: 80%" border="1px">
          <span class="ziti">常用操作</span>
          <div style="width: 100%; margin-left: 20px; margin-top: 10px;">
              <el-button  style="width: 70px;height: 70px;border: none;padding:0px 0px">
                <div>
<!--                                <img src="~@/assets/icons/imageicon/lyy1.png" style="margin-top:8px;height: 45px;width: 45px;margin-bottom: 3px">-->
                  <div style="">填报事件</div>
                </div>
              </el-button>

            <el-button  style="width: 70px;height: 70px;border: none;padding:0px 0px">
              <div>
<!--                <img src="~@/assets/icons/imageicon/lyy2.png" style="margin-top:8px;height: 45px;width: 45px;margin-bottom: 3px">-->
                <div style="">处理事件</div>
              </div>
            </el-button>

            <el-button  style="width: 70px;height: 70px;border: none;padding:0px 0px">
              <div>
<!--                <img src="~@/assets/icons/imageicon/lyy2.png" style="margin-top:8px;height: 45px;width: 45px;margin-bottom: 3px">-->
                <div style="">知识库</div>
              </div>
            </el-button>
            <el-button  style="width: 70px;height: 70px;border: none;padding:0px 0px">
              <div>
<!--                <img src="~@/assets/icons/imageicon/ly3.png" style="margin-top:8px;height: 45px;width: 45px;margin-bottom: 3px">-->
                <div style="">患者填报</div>
              </div>
            </el-button>

            <el-button  style="width: 70px;height: 70px;border: none;padding:0px 0px">
              <div>
<!--                <img src="~@/assets/icons/imageicon/ly4.png" style="margin-top:8px;height: 45px;width: 45px;margin-bottom: 3px">-->
                <div style="">统计分析</div>
              </div>
            </el-button>
            <el-button  style="width: 70px;height: 70px;border: none;padding:0px 0px">
              <div>
<!--                <img src="~@/assets/icons/imageicon/ly5.png" style="margin-top:8px;height: 45px;width: 45px;margin-bottom: 3px">-->
                <div style="">科室管理</div>
              </div>
            </el-button>
            <el-button  style="width: 70px;height: 70px;border: none;padding:0px 0px">
              <div>
<!--                <img src="~@/assets/icons/imageicon/ly6.png" style="margin-top:8px;height: 45px;width: 45px;margin-bottom: 3px">-->
                <div style="">人员管理</div>
              </div>
            </el-button>

            </div>
        </div>

        <!--      待办事项  -->
        <div class="right-column" style="background-color: #1c84c6;height: 95px;width: 80%;margin-left:10px ; margin-top: 20px" border="1px">
        </div>
      </div>
      <!--      概述-->
      <div style="background-color:darkorange" border="1px; float: right;">概述</div>
    </div>
    <!--   柱状图，扇形图 -->
<!--    <div class="half2">
      <div class="" style="margin-left: 100px;">
        <div
          class="echart half2-left"
          ref="mychart1"
          id="mychart1"
          :style="{ float: 'left', width: '45%', height: '400px' }"
        ></div>
      </div>
    </div>
    &lt;!&ndash;   柱状图，扇形图 &ndash;&gt;
    <div class="half3">
      <div class="" style="margin-left: 100px;">
        <div
          class="echart half2-right"
          ref="mychart"
          id="mychart"
          :style="{ float: 'left', width: '45%', height: '400px' }"
        ></div>
      </div>
    </div>-->
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      name: "张雪",
      xData: ["2020-02", "2020-03", "2020-04", "2020-05"], //横坐标数据
      yData: [30, 132, 80, 134] //纵坐标数据，与横坐标对应
    };
  },
  mounted() {
    this.initEcharts();
    this.bingtu();
  },
  methods: {
    initEcharts() {
      const option = {
        title: {
          text: "事件等级"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar", //类型为柱状图
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      const myChart = echarts.init(this.$refs.mychart);// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    bingtu() {
      const option1 = {
        series: [
          {
            type: "pie", // type设置为饼图
            data: [
              {
                value: 463,
                name: "Ⅰ级事件"
              },
              {
                value: 157,
                name: "Ⅱ级事件"
              },
              {
                value: 149,
                name: "Ⅲ级事件"
              },
              {
                value: 147,
                name: "Ⅳ级事件"
              }
            ]
          }
        ]
      };
      const myChart1 = echarts.init(this.$refs.mychart1);// 图标初始化
      myChart1.setOption(option1);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart1.resize();
      });

    }
  }
};
</script>
<style>

.ziti {
  background-color: #00c900;
  margin-top: 100px;
  margin-left: 0.8%;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-size: 16px;
}
.half1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 垂直顶部对齐 */
}
.half2-left{

  justify-content: center;
  align-items: center;
}
.half2-right{
  justify-content: center;
  align-items: center;}
.left-column {
  flex: 1; /* 左边栏占据剩余空间 */
  display: flex;
  flex-direction: column; /* 竖直排列 */
}

.right-column {
  flex: 1; /* 右边栏占据剩余空间 */
}
</style>
